<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="../layui/css/layui.css"  media="all">
  <style>
    html {
      padding: 10px;
    }
    
    body{
      overflow-y: scroll;
    }
    label.layui-form-label {
      width: 60px;
    }

    div.layui-form-item {
      margin-bottom: 0px;
    }
  </style>
</head>
<body>
<!-- 搜索表单 -->
<blockquote class="layui-elem-quote layui-quote-nm">
  <form id="search_form" class="layui-form" action="" lay-filter="search_form">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label" style="margin-left:-45px;">标题</label>
          <div class="layui-input-inline">
            <input type="text" name="title" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <label class="layui-form-label">文章分类</label>
          <div class="layui-input-inline">
            <select name="category" id="categorySelect">
              <option value="">请选择分类</option>
              
            </select>
          </div>
        </div>

        <div class="layui-inline">
          <label class="layui-form-label">发表日期</label>
          <div class="layui-input-inline">
            <input type="text" name="created" id="createdDate" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
          </div>
        </div>
    
        <div class="layui-inline">
          <button class="layui-btn layui-btn-normal" lay-submit lay-filter="post-search">
              <i class="layui-icon">&#xe615;</i>搜索
          </button>
        </div>
      </div>
    </form>
</blockquote>

<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnAdd">添加文章</button>
<button class="layui-btn layui-btn-sm layui-btn-normal" id="btnDeleteBatch">批量删除</button>


<!-- 文章列表 -->
<table class="layui-hide" id="posts"></table>

<script src="../layui/layui.js" charset="utf-8"></script>

<script>
layui.use(['table', 'laydate', 'form'], function(){
  var table = layui.table;
  var laydate = layui.laydate;
  
  //日期
  laydate.render({
    elem: '#createdDate'
  });

  table.render({
    elem: '#posts'
    ,cellMinWidth: 80
    ,cols: [[
      {checkbox:true},
      {field:'id', width:80, title: 'ID'},
      {field:'title', minwidth:100, title: '标题'},
      {field:'created',width:150,title:'创建时间'},
      {field:'category', width:150, title: '分类',templet: function(data) {
        // 对某一列的数据进行格式化或者格式的转换
        if (data.category) {
          return data.category.name;
        } else {
          return '';
        }
      }}
    ]],
    url: '../post/page',
    page: true
  });

  var $ = layui.$;
  $('#btnAdd').on('click', function() {
  // 跳到添加文章界面 pages/post_form.html
  // BOM api  browser object model , history, location
  window.location = "post_form.html";
  });

  $('#btnDeleteBatch').on('click', function() {
  // 获取选中行的id，把选中的多个id传到后台
  var checkStatus = table.checkStatus('posts'); //test即为基础参数id对应的值
 
  console.log(checkStatus.data) //获取选中行的数据
  
  var ids = [];
  for (var i = 0; i < checkStatus.data.length; i++) {
    ids.push(checkStatus.data[i].id);
  }
  
  var param = {"ids": ids};
  $.get("../post/delbat?" + $.param(param, true), function(data) {
    layer.msg('删除成功！');
    table.reload('posts');
  });
  });
  
  var form = layui.form;
  
  // 页面加载完成之后，查询所有的分类信息，显示到下拉框
  $.get("../category/findAll", function(response) {
    var categories = response.data;
    
    // <option value='id'>name</option>
    for (var i = 0; i < categories.length; i++) {
      var item = categories[i];
      var option = "<option value='" + item.id + "'>" + item.name + "</option>";
      $('#categorySelect').append(option);
    }
    
    form.render('select');
  });
  
  // 监听表单提交
  form.on('submit(post-search)', function(data) {
    console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      
    table.reload('posts', {
      url: "../post/search",
      where: data.field,
      page: {
        curr: 1  // 重新从第一页开始显示
      }
    });

    return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
  });

});
</script>

</body>
</html>